<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
    <link rel="stylesheet" href="../styles.css">
</head>
<body class="bg-gray-100 p-4">
    <h2 class="text-xl font-bold mb-4 text-center text-red-600">景点详情 - 景点 A</h2>

    <!-- Image Carousel/Gallery -->
    <div class="mb-4 rounded-lg overflow-hidden shadow-md">
         <img src="https://via.placeholder.com/600x250?text=Attraction+A+Detail" alt="景点A详情图" class="w-full h-auto">
         <!-- Replace with real image or carousel -->
    </div>

    <!-- Basic Info & Actions -->
    <div class="bg-white p-4 rounded-lg shadow-md mb-4">
        <h3 class="text-lg font-semibold mb-2">景点名称 A</h3>
        <div class="flex justify-between items-center mb-3">
            <span class="text-sm text-gray-500"><i class="fas fa-map-marker-alt mr-1"></i> 区域/位置</span>
            <span class="text-sm text-yellow-500"><i class="fas fa-star"></i> 4.8</span>
        </div>
        <div class="flex space-x-4">
            <button class="flex-1 bg-red-500 text-white py-2 px-4 rounded-md hover:bg-red-600 flex items-center justify-center space-x-2">
                <i class="fas fa-volume-up"></i>
                <span>开始讲解</span>
            </button>
            <button class="flex-1 bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 flex items-center justify-center space-x-2">
                <i class="fas fa-directions"></i>
                <span>路线导航</span>
            </button>
        </div>
    </div>

    <!-- Detailed Description -->
    <div class="bg-white p-4 rounded-lg shadow-md">
        <h4 class="font-semibold mb-2 border-b pb-1">详细介绍</h4>
        <p class="text-sm text-gray-700 leading-relaxed">
            这里是关于景点 A 的详细文字介绍。可以包含历史背景、文化意义、建筑特色等等。这段文字应该足够长，以填充一定的空间，展示排版效果。
            <br><br>
            可以分段落来组织内容，使其更易于阅读。例如，可以介绍景点的历史渊源，或者与之相关的传说故事。
        </p>
    </div>

</body>
</html>